﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example11.aspx.cs" Inherits="Chapter09.Example11" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 9-11 带自定义计数器的嵌套列表</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" href="Example01.Favicon.ico" type="image/x-ico" />
    <style>
        body {
            counter-reset: OuterItemCount 5 InnerItemCount;
        }

        #outerlist > li:before {
            content: counter(OuterItemCount) ".";
            counter-increment: OuterItemCount 2;
        }

        ul.innterlist > li:before {
            content: counter(InnerItemCount, lower-alpha) ".";
            counter-increment: InnerItemCount;
        }
    </style>
</head>
<body>
    <form>
        <div>
            I like apples and oranges.
            I also like :
            <ul id="outerlist" style="list-style-type: none">
                <li>bananas</li>
                <li>mangoes, including:
                    <ul class="innterlist">
                        <li>Haden mangoes</li>
                        <li>Keitt mangoes</li>
                        <li>Kent mangoes</li>
                    </ul>
                </li>
                <li>cherries</li>
                <li>plums, including:
                    <ul class="innterlist">
                        <li>Elephant Heart plums</li>
                        <li>Stanley plums</li>
                        <li>Seneca plums</li>
                    </ul>
                </li>
                <li>peaches</li>
                <li>grapes</li>
            </ul>
            You can see other fruits I like <a href="fruitlist.html">here</a>.
        </div>
    </form>
</body>
</html>
